<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="masterPage.xhtml">
	
	<ui:define name="titulo">
		<h:outputLabel value="Lista de eventos" />
		<input id="pagina" type="hidden" value="eventoLista"/>
	</ui:define>
	
	<ui:define name="centro">
		
		<h:form id="idForm">
		
			<!-- FILTROS ===================================================================== -->
		
			<div>
				<p:panelGrid id="idPanelGridFiltros" columns="6" cellpadding="4" style="display:block; text-align:left">
					<h:outputText value="Data: " />
					<p:selectOneMenu value="#{eventoListMBean.filtroData}" effect="fade">
			            <f:selectItem itemLabel="Todos" itemValue="0" />
			            <f:selectItem itemLabel="Anteriores" itemValue="1" />
			            <f:selectItem itemLabel="Atuais e posteriores" itemValue="2" />
			            <p:ajax event="change" update=":idForm:idTableEvento" listener="#{eventoListMBean.busca}"/>
			        </p:selectOneMenu>
			        
			        <h:outputText value="Pendência: " />
					<p:selectOneMenu value="#{eventoListMBean.filtroConcluido}" effect="fade">
			            <f:selectItem itemLabel="Todos" itemValue="0" />
			            <f:selectItem itemLabel="Pendentes" itemValue="1" />
			            <f:selectItem itemLabel="Concluidos" itemValue="2" />
			            <p:ajax event="change" update=":idForm:idTableEvento" listener="#{eventoListMBean.busca}"/>
			        </p:selectOneMenu>
			        
			        <h:outputText value="Busca por título ou descrição: "/>  
	                <p:inputText id="idFiltroTituloDescricao" value="#{eventoListMBean.filtroTituloDescricao}">
	                	<p:ajax event="keyup" update=":idForm:idTableEvento" listener="#{eventoListMBean.busca}"/>
	                </p:inputText>
				</p:panelGrid>
			</div>
			<br/>
	
			<!-- TABELA ===================================================================== -->
	
		    <p:dataTable id="idTableEvento" var="evento" value="#{eventoListMBean.list}" 
		    	selection="#{eventoListMBean.selected}" selectionMode="single" 
		    	rowkey="#{evento.id}"
		    	paginator="true" rows="10" rowsPerPageTemplate="5,10,15"
		    	emptyMessage="Sem eventos" 
		    	style="max-width: 800px; min-width: 550px">
		
				<p:ajax event="rowSelect" update=":idForm:growl, :idForm:idPanelGridDetalhe" oncomplete="varDialogDetalhe.show()" />
				
		        <p:column headerText="Data" sortBy="#{evento.data}"
		        	style="max-width: 100px; min-width: 100px; overflow: hidden">
		            <h:outputText value="#{evento.data}">
		            	<f:convertDateTime pattern="dd/MM/yyyy"/>  
		            </h:outputText>
		        </p:column>
		        <p:column headerText="Hora" style="max-width: 70px; min-width: 70px; overflow: hidden">
		            <h:outputText value="#{evento.hora}" />
		        </p:column>
		        <p:column headerText="Titulo" style="text-align: left; max-width: 560px; min-width: 460px; overflow: hidden">
		            <h:outputText value="#{evento.titulo}" />
		        </p:column>
		        <p:column headerText="Concluido" style="max-width: 70px; min-width: 70px; overflow: hidden">
		            <h:outputText value="#{evento.concluido}">
		            	<f:converter converterId="booleanConverter"/>
		            </h:outputText>
		        </p:column>
		    </p:dataTable>
			
			<!-- MODAL DETALHE ======================================================================== -->
			
			<h:panelGroup id="idPanelGroupDetalhe">
				<p:dialog header="Detalhes do Evento" id="idDialogDetalhe" widgetVar="varDialogDetalhe" 
					modal="true" showEffect="clip" hideEffect="fold" minWidth="600" minHeight="500">
			        
			        <p:panelGrid id="idPanelGridDetalhe" columns="2" cellpadding="4" style="display:block; text-align:left">
						<f:facet name="header">
							Evento
						</f:facet>
						<h:outputText value="Data: " />
						<p:calendar value="#{eventoListMBean.selected.data}" showOn="button">
							<f:convertDateTime pattern="dd/MM/yyyy"/>  
						</p:calendar>
						<h:outputText value="Hora: " />
						<p:selectOneMenu value="#{eventoListMBean.selected.hora}" effect="fade">
				            <f:selectItem itemLabel="Selecione" itemValue="" />
				            <f:selectItems value="#{eventoListMBean.horas}" var="hora" itemLabel="#{hora}" itemValue="#{hora}"/>
				        </p:selectOneMenu>
						<h:outputText value="Titulo:  " />
						<h:inputText size="50" value="#{eventoListMBean.selected.titulo}"/>
						<h:outputText value="Descricao: " />
						<h:inputTextarea cols="52" rows="5" value="#{eventoListMBean.selected.descricao}"/>
						<h:outputText value="Concluido: " />
						<p:selectBooleanButton value="#{eventoListMBean.selected.concluido}" onLabel="Sim" offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
			        	<f:facet name="footer">
							<h:panelGroup>
								<p:commandButton id="idButtonAtualizar" value="Atualizar" onIcon="ui-icon-save"
									update=":idForm:growl, idForm:idTableEvento"   
									actionListener="#{eventoListMBean.atualiza}"/>
			                    <p:commandButton id="idButtonRemover" value="Remover" onIcon="ui-icon-delete"
			                    	update=":idForm:growl, idForm:idTableEvento"   
									actionListener="#{eventoListMBean.remove}"   
			                    	oncomplete="handleEventoDeleteRequest(xhr, status, args)"/>
			                </h:panelGroup>
						</f:facet>
			        </p:panelGrid>
			    </p:dialog>
			</h:panelGroup>
		
			<!-- MSGS =============================================================================== -->
		
	    	<p:growl id="growl" showDetail="true"/>
	
		</h:form>
		
	</ui:define>
</ui:composition>

</html>